<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>登录页面 - 萌迹(Cute Trail Admin)后台管理</title>
  <link rel="icon" href="petvet.ico" type="webapp/petvet.ico">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/materialdesignicons.min.css" rel="stylesheet">
  <link href="css/style.min.css" rel="stylesheet">
  <style>
    body {
      background-color: #fff;
    }
    .lyear-login-box {
      position: relative;
      overflow-x: hidden;
      width: 100%;
      height: 100%;
      -webkit-transition: 0.5s;
      -o-transition: 0.5s;
      transition: 0.5s;
    }
    .lyear-login-left {
      width: 50%;
      top: 0;
      left: 0;
      bottom: 0;
      position: fixed;
      height: 100%;
      z-index: 555;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
    }
    .lyear-overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 10;
      background: rgba(0, 0, 0, 0.2);
    }
    .lyear-logo {
      margin-bottom: 50px;
    }
    .lyear-featured {
      z-index: 12;
      position: absolute;
      bottom: 0;
      padding: 30px;
      width: 100%;
    }
    .lyear-featured h4 {
      color: #fff;
      line-height: 32px;
    }
    .lyear-featured h4 small {
      color: #fff;
      display: block;
      text-align: right;
      margin-top: 15px;
    }
    .lyear-login-right {
      margin-left: 50%;
      position: relative;
      z-index: 999;
      padding: 100px;
      background-color: #FFFFFF;
    }
    @media screen and (max-width: 1024px) {
      .lyear-login-right {
        padding: 50px;
      }
    }
    @media screen and (max-width: 820px) {
      .lyear-login-left {
        width: 100%;
        position: relative;
        z-index: 999;
        height: 300px;
      }
      .lyear-login-right {
        margin-left: 0;
      }
    }
    @media screen and (max-width: 480px) {
      .lyear-login-right {
        padding: 50px;
      }
    }
    @media screen and (max-width: 320px) {
      .lyear-login-right {
        padding: 30px;
      }
    }
    .captcha-container {
      display: flex;
      align-items: center;
    }
    .captcha-input {
      flex: 1;
    }
    .captcha-img {
      margin-left: 10px;
      height: 34px;
      cursor: pointer;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    .error-message {
      color: #f44336;
      font-size: 12px;
      margin-top: 5px;
      display: none;
    }
  </style>
</head>

<body>
<div class="lyear-login-box">
  <div class="lyear-login-left" style="background-image: url(images/pets2.jpg)">
    <div class="lyear-overlay"></div>
    <div class="lyear-featured">
      <h4>不要给你的宠物食用含可可碱和咖啡因的食品，宠物可能会一命呜呼的！<small> - 权威医生的权威建议</small></h4>
    </div>
  </div>
  <div class="lyear-login-right">
    <!--头像-->
    <div class="lyear-logo text-center">
      <a href="#!"><img src="images/mj.png" alt="logo" /></a>
    </div>
    <form id="loginForm" action="#!" method="post">
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" class="form-control" id="username" name="username" placeholder="请输入您的用户名" required>
      </div>

      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" class="form-control" id="password" name="password" placeholder="请输入您的密码" required>
      </div>

      <div class="form-group">
        <label for="captcha">验证码</label>
        <div class="captcha-container">
          <input type="text" class="form-control captcha-input" id="captcha" name="captcha" placeholder="验证码" required>
          <img src="" class="captcha-img" id="captchaImg" title="点击刷新" alt="captcha">
        </div>
        <div class="error-message" id="captchaError">验证码错误，请重新输入</div>
      </div>

      <div class="form-group">
        <label class="lyear-checkbox checkbox-primary m-t-10">
          <input type="checkbox" name="remember" checked=""><span>5天内自动登录</span>
        </label>
      </div>

      <div class="form-group">
        <button class="btn btn-block btn-primary" type="submit">立即登录</button>
      </div>
      <footer class="text-center">
        <p class="m-b-0">Copyright © 2025 萌迹</a>. All right reserved</p>
      </footer>
    </form>

  </div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    // 初始化验证码
    refreshCaptcha();

    // 点击验证码图片刷新
    $('#captchaImg').click(function() {
      refreshCaptcha();
    });

    // 表单提交验证
    $('#loginForm').submit(function(e) {
      e.preventDefault();

      // 隐藏错误信息
      $('#captchaError').hide();

      // 这里应该有实际的验证逻辑
      // 模拟验证过程
      if (validateForm()) {
        alert('登录成功！');
        // 实际应用中这里应该提交表单到服务器
        // this.submit();
      }
    });

    // 验证码输入框失去焦点时验证
    $('#captcha').blur(function() {
      validateCaptcha();
    });
  });

  // 刷新验证码
  function refreshCaptcha() {
    // 这里应该从服务器获取新的验证码
    // 模拟生成随机验证码
    var random = Math.random().toString(36).substr(2, 4).toUpperCase();
    // 实际应用中应该是这样的：
    // $('#captchaImg').attr('src', '/captcha?' + new Date().getTime());

    // 存储当前验证码到data属性，用于验证
    $('#captchaImg').data('code', random);

    // 模拟显示验证码图片（实际应用中不需要这部分）
    var canvas = document.createElement('canvas');
    canvas.width = 100;
    canvas.height = 34;
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = '#f5f5f5';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.font = '20px Arial';
    ctx.fillStyle = '#333';
    ctx.fillText(random, 10, 25);
    $('#captchaImg').attr('src', canvas.toDataURL());

    // 清空验证码输入框
    $('#captcha').val('');
  }

  // 验证表单
  function validateForm() {
    var isValid = true;

    // 验证用户名
    if ($('#username').val().trim() === '') {
      isValid = false;
    }

    // 验证密码
    if ($('#password').val().trim() === '') {
      isValid = false;
    }

    // 验证验证码
    if (!validateCaptcha()) {
      isValid = false;
    }

    return isValid;
  }

  // 验证验证码
  function validateCaptcha() {
    var inputCaptcha = $('#captcha').val().trim().toUpperCase();
    var realCaptcha = $('#captchaImg').data('code');

    if (inputCaptcha === '') {
      return false;
    }

    if (inputCaptcha !== realCaptcha) {
      $('#captchaError').show();
      return false;
    }

    $('#captchaError').hide();
    return true;
  }
</script>
</body>
</html>